<template>
<div>
  <div style="margin-top:10px;display: flex;justify-content: center">
    <el-input v-model="keywords"
              placeholder="通过用户名搜索用户"
              prefix-icon="el-icon-search" style="width: 400px;margin-right: 5px"></el-input>
    <el-button type="primary" @click="search">搜索</el-button>
  </div>
  <div v-loading="loading" style="margin-top: 20px;display: flex;flex-wrap: wrap;">
    <el-card class="hr-card-class" v-for="(hr,index) in hrs" :key="index">
      <div slot="header" class="clearfix">
        <span>{{hr.name}}</span>
        <el-button style="float: right; padding: 3px 0" type="danger" icon="el-icon-delete" @click="deleteHr(hr)"></el-button>
      </div>
      <div>
        <el-image
            style="width: 100px; height: 100px;border-radius: 100px"
            :src="hr.userface"
            :alt="hr.name"/>
      </div>
      <div style="margin-top: 5px;font-size: 12px">
        <div>用户名:{{hr.username}}</div>
        <div>手机号:{{hr.phone}}</div>
        <div>地址:{{hr.address}}</div>
        <div>
          <el-switch
              style="display: flex;margin-bottom: 2px"
              v-model="hr.enabled"
              active-color="#13ce66"
              @change="enabledChange(hr)"
              inactive-color="#ff4949"
              active-text="启用"
              inactive-text="禁用">
          </el-switch>
        </div>
        <div>用户角色:
          <el-tag style="margin-left: 2px" size="mini" v-for="(role,index1) in hr.roles" :key="index1">{{role.nameZh}}</el-tag>

          <el-popover
              placement="right"
              title="角色列表"
              width="200"
              @show="showPop(hr)"
              @hide="hidePop(hr)"
              trigger="click">
            <el-select  v-model="selectedroles" multiple placeholder="请选择">
              <el-option
                  v-for="(r,index) in allroles"
                  :key="index"
                  :label="r.nameZh"
                  :value="r.id">
              </el-option>
            </el-select>
            <el-button slot="reference" icon="el-icon-more" size="mini" type="text"></el-button>
          </el-popover>

        </div>
      </div>
    </el-card>
  </div>
</div>
</template>

<script>
export default {
  name: "SysHr",
  data(){
    return{
      keywords:'',
      hrs:[],
      allroles:[],
      selectedroles:[],
      loading:false
    }
  },
  mounted() {
    this.initHrs();
  },
  methods:{
    initHrs(){
      this.loading=true;
      this.getRequest("system/hr/?keywords="+this.keywords).then(resp=>{
        this.loading=false;
        if(resp){
          this.hrs = resp;
        }
      })
    },
    enabledChange(hr){
      delete hr.roles;
      this.putRequest("system/hr/",hr).then(resp=>{
        if(resp){
          this.initHrs();
        }
      })
    },
    initAllRoles(){
      this.getRequest("system/hr/roles").then(resp=>{
        if(resp){
          this.allroles=resp;
        }
      })
    },
    showPop(hr){
      this.initAllRoles();
      let roles = hr.roles;
      this.selectedroles = [];
      roles.forEach(r=>{
        this.selectedroles.push(r.id);
      })
    },
    hidePop(hr){
      let roles = [];
      Object.assign(roles,hr.roles);
      let flag = false;
      if(roles.length != this.selectedroles.length){
        flag = true
      }else {
        for (let i = 0; i < roles.length; i++) {
          let role = roles[i];
          for (let j = 0; j < this.selectedroles.length; j++) {
            let sr = this.selectedroles[j];
            if(role.id == sr){
              roles.splice(i,1);
              i--;
              break;
            }
          }
        }
        if(roles.length!=0){
          flag=true;
        }
      }
      if(flag) {
        let url = "system/hr/role?hrid=" + hr.id;
        this.selectedroles.forEach(sr => {
          url += '&rids=' + sr;
        });
        this.putRequest(url).then(resp => {
          if (resp) {
            this.initHrs();
          }
        })
      }
    },
    search(){
      this.initHrs();
    },
    deleteHr(hr){
      this.$confirm('此操作将永久删除【'+hr.name+'】, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest("system/hr/"+hr.id).then(resp=>{
          if(resp){
            this.initHrs();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    }
}
}
</script>

<style>
.hr-card-class{
  width: 350px;
  margin-bottom: 10px;
  margin-right: 10px;;
}
</style>